<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        [v-cloak]{
            display: none;
        }
        .container{
            width:1000px;
            margin:100px auto;
            display: flex;
        }
        .pricelist{
            display: flex;
            flex-wrap: wrap;
            flex:1;
        }
        .pricelist li{
            padding:10px 20px;
            border:1px solid red;
            margin:10px;
            user-select: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .pricelist li.active{
            background:orange;
            color:#fff;
        }
        .content{
            display: flex;
            border:1px solid #ccc;
            padding:10px;
            margin:0 20px;
        }
        .content button{
            width: 30px;
            border:none;
            outline: none;
            display: inline-block;
            vertical-align: middle;
        }
        .content input{
            border:none;
            width:40px;
            height:30px;
            text-align:center;
            outline: none;
            display: inline-block;
            vertical-align: middle;

        }


    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="container">
            <img :src="showInfo.verticalPic" alt="">
            <div style="padding:0 20px;border:1px solid red;">
                <h2>【{{showInfo.cityname}}】{{showInfo.name}}</h2>
                 <div style="padding:20px 0;">时间：{{showInfo.showtime}}</div>
                 <div>场馆：{{showInfo.venuecity}} | {{showInfo.venue}}</div>
                 <div style="padding-top:10px;">票档</div>
                 <ul class="pricelist">
                     <li @click="activeIndex=i" :class="{active:activeIndex===i}" v-for="(item,i) in pricelist">{{item}}</li>
                 </ul>
                 <div style="padding:20px 0;display: flex;">
                    <div style="padding-top:10px;">数量</div>
                    <div class="content">
                        <button @click="count--" :disabled="count===1">-</button>
                        <input type="text" v-model="count">
                        <button @click="count++" :disabled="count===10">+</button>
                    </div>
                    <div v-show="count===10">
                        限购10张
                    </div>
                    <h2>¥{{ totalPrice | fixed }}/${{ totalPriceUS | fixed }}</h2>
                
                </div>
            </div>
          

        </div>

    </div>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./utils/filter.js"></script>
    <script>
        function getQueryParams(){
            let obj={}
            if(!location.search) return obj
            let queryArry =location.search.replace('?',"").split("&")
            queryArry.forEach(r=>{
                let arr = r.split('=')
                obj[arr[0]] =arr[1]
            })
            return obj

        }

        new Vue({
            el:"#app",
            data(){
                return{
                    showInfo:{},
                    pricelist: [480, 680, 880, 1280, 1480],
                    activeIndex:0,
                    count: 1,

                }
            },
            computed:{
                totalPrice(){
                    return this.count *this.pricelist[this.activeIndex]
                },
                totalPriceUS(){
                    return this.totalPrice / 6.9
                }

            },
            watch:{

                activeIndex(){
                    this.count =1
                },
                count(){
                    //判断不是数字
                    if(isNaN(this.count)) this.count =1
                    //判断不是整数 Number.isInteger()用来判断一个值是否为整数。 Number.isInteger(25) // true
       //Number.isInteger(25.0) // true
    //Number.isInteger("15") // false
    //Number.isInteger(true) // false
                if(!Number.isInteger(this.count)) this.count =Math.floor(this.count)
                if (this.count > 10) this.count = 10
                if (this.count < 1) this.count = 1


                }
            },
            methods:{
                async getShowInfo(){
                    let res= await axios.get("show.json")
                    let id = getQueryParams().id
                    console.log(id)
                    console.log(res.data)
                   let show = res.data.find((r)=>{
                        console.log(r.id +""===id+"")
                        return r.id + " "===id +" "
                    }) //find() 方法为数组中的每个元素都调用一次函数执行：
                    this.showInfo =show
                    console.log(this.showInfo)
 
                }

            },
            mounted(){

            },
            created(){
                this.getShowInfo()
            }
        })
    </script>
</body>
</html>